<template>
  <view class="outer-bg">
    <view v-if="users.length > 0" class="container">
      <view v-for="item in users" :key="item.id" class="user-item">
        <image class="avatar" :src="item.avatar || '/static/default-avatar.png'" @click.stop="goToProfile(item.id)" />
        <view class="main-info" @click.stop="goToProfile(item.id)">
          <view class="nickname">{{ item.nickname || item.username || '用户' }}</view>
          <view class="userid">ID {{ item.uid || item.id }}</view>
        </view>
        <button class="unfollow-btn" @click="cancelFollow(item)">取消关注</button>
      </view>
    </view>
    <view v-else class="empty-tip">
      <text>暂无关注</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const users = ref([])

// 加载关注列表
const loadFollowList = async () => {
  try {
    const FollowApi = (await import('@/sheep/api/member/follow')).default
    const res = await FollowApi.getFollowList()
    
    if (res && res.code === 0 && res.data) {
      users.value = res.data || []
    } else {
      users.value = []
    }
  } catch (error) {
    console.error('加载关注列表失败:', error)
    uni.showToast({
      title: '加载失败',
      icon: 'none'
    })
    users.value = []
  }
}

// 取消关注
const cancelFollow = async (item) => {
  try {
    const FollowApi = (await import('@/sheep/api/member/follow')).default
    const res = await FollowApi.deleteFollow(item.id)
    
    if (res && res.code === 0) {
      // 从列表中移除
      const index = users.value.findIndex(u => u.id === item.id)
      if (index > -1) {
        users.value.splice(index, 1)
      }
      uni.showToast({
        title: '已取消关注',
        icon: 'success'
      })
    }
  } catch (error) {
    console.error('取消关注失败:', error)
    uni.showToast({
      title: '取消关注失败',
      icon: 'none'
    })
  }
}

// 跳转到个人主页
const goToProfile = (userId) => {
  if (userId) {
    uni.navigateTo({
      url: `/pages/user/profile?userId=${userId}`
    })
  }
}

onMounted(() => {
  loadFollowList()
})
</script>

<style lang="scss" scoped>
.outer-bg {
  background: #f6f7fa;
  min-height: 100vh;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.container {
  margin: 20rpx 16rpx 0 16rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
  padding: 12rpx 0 12rpx 0;
}
.user-item {
  display: flex;
  align-items: center;
  padding: 25rpx 34rpx;
  position: relative;
  &:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 34rpx;
    right: 34rpx;
    height: 1px;
    background: #f1f2f5;
  }
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 24rpx;
  background: #f2f2f2;
}
.main-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.nickname {
  font-size: 28rpx;
  font-weight: bold;
  color: #26272a;
  margin-bottom: 10rpx;
  word-break: break-all;
  white-space: normal;
}
.userid {
  color: #676767;
  font-size: 24rpx;
  font-weight: 400;
}
.unfollow-btn {
  border: none;
  outline: none;
  border-radius: 30rpx;
  background: #ededed;
  color: #bbb;
  font-size: 24rpx;
  min-width: 140rpx;
  height: 55rpx;
  padding: 0 12rpx;
  text-align: center;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: none;
  &::after {
    border: none;
  }
}
.empty-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400rpx;
  color: #999;
  font-size: 28rpx;
}
.avatar {
  cursor: pointer;
}
.main-info {
  cursor: pointer;
}
</style>
